發想

某些網頁為了獎勵使用者特定操作，會在網頁上噴出彩帶效果。

讓我們來設計一個隨時隨地都可以慶祝的拉炮元件吧！(≧∀≦)ﾉ🎉

類似以下影片。( ´ ▽ ` )ﾉ

規格

功能需求

1. 可自訂彩帶的顏色
2. 同一時間內可連續發射多次
3. 可設定速度、位置和角度等等發射參數
4. 可設定發射範圍
5. 彩帶從發射到落下要模擬真實的物理效果。（例如：重力、空氣阻力等等）

建立檔案

與先前章節相同，讓我們建立元件與文件檔案，檔案結構如下。

.
├─ docs        
│  └─ components
│     └─ util-party-popper
│        └─ index.md
└─ src
   └─ components
      └─ util-party-popper
         ├─ examples
         ├─ └─ basic-usage.vue 
         └─ util-party-popper.vue

元件內容

這個元件我們預期使用 babylon.js 實現，所以先讓我們新增一個 canvas 並刪除 slot 部分。

src\components\util-party-popper\util-party-popper.vue

<template>
  <canvas ref="canvasRef" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

// #region Props
interface Props { }
// #endregion Props
const props = withDefaults(defineProps<Props>(), {});

// #region Emits
const emit = defineEmits<{}>();
// #endregion Emits

const canvasRef = ref<HTMLCanvasElement>();

// #region Methods
defineExpose({});
// #endregion Methods
</script>

<style scoped lang="sass">
</style>

基本使用範例內容很單純。

src\components\util-party-popper\examples\basic-usage.vue

<template>
  <div class="flex flex-col gap-4 w-full border border-gray-300">
    <util-party-popper />
  </div>
</template>

<script setup lang="ts">
import UtilPartyPopper from '../util-party-popper.vue';
</script>

元件介紹

接著是元件介紹部分，一樣加入固定的基本內容。

docs\components\util-party-popper\index.md

---
description: 隨時隨地都可以慶祝！✧｡٩(ˊᗜˋ*)و✧*｡
---

<script setup>
import BasicUsage from '../../../src/components/util-party-popper/examples/basic-usage.vue'
</script>

# 拉炮

隨時隨地都可以慶祝！✧｡٩(ˊᗜˋ*)و✧*｡

## 使用範例

### 基本用法

<basic-usage/>

::: details 查看範例原始碼
<<< ../../../src/components/util-party-popper/examples/basic-usage.vue
:::

## 原理

文字文字文字文字

## API

### Props

<<< ../../../src/components/util-party-popper/util-party-popper.vue/#Props

### Emits

<<< ../../../src/components/util-party-popper/util-party-popper.vue/#Emits

### Methods

<<< ../../../src/components/util-party-popper/util-party-popper.vue/#Methods

導航

最後一步就是在 sidebar 中加入頁面連結。

docs\.vitepress\config.mts

...
export default defineConfig({
  ...
  themeConfig: {
    ...
    sidebar: [
      ...
      {
        text: '元件',
        link: '/components/',
        items: [
          ...
          {
            text: '實用',
            items: [
              { text: '拉炮', link: '/components/util-party-popper/' },
            ]
          },
        ]
      },
    ],
    ...
  }
})

接下來讓我們開始開發元件吧！( •̀ ω •́ )✧

總結

• 分析「拉炮」的規格
• 建立元件與文件檔案

以上程式碼已同步至 GitLab，大家可以前往下載：

GitLab - D13